<template>
  <div class="banner-main">
    <div class="banner-left">
      <div class="banner-header">
        <div class="g-flex-1 g-m-l-4">{{ locale.t("上下文") }}</div>
        <div class="banner-display">{{ locale.t("显示") }}</div>
      </div>
      <div class="banner-content">
        <div
          v-for="(bannerItem, index) in bannerItems"
          :key="bannerItem.id"
          :class="{'banner-item':true, 'active-banner-item':tagsPaneModel.bannerModel.isActiveBannerItem(bannerItem.id!)}"
          @click="tagsPaneModel.bannerModel.handleBannerItemClick(bannerItem.id!)"
        >
          <div
            class="g-flex-1 g-m-l-4 g-ov-auto"
            v-html="bannerItem.html"
          ></div>
          <div class="g-flex-0 g-flex">
            <img
              v-if="bannerSelected(bannerItem)"
              src="statics/icons/app/iconmodify.svg"
              class="g-pointer g-m-r-4"
              style="width: 20px"
              @click="tagsPaneModel.bannerModel.editSlotValue(row)"
            />
            <div class="banner-display">
              <MDropdown>
                <div class="display-content">
                  <div class="g-flex-1">
                    {{ locale.getTByKey(bannerItem.status) }}
                  </div>
                  <div
                    v-if="bannerSelected(bannerItem) && !row.readonly && !isModelDisabled"
                    class="g-flex-0 g-pd-lr-4"
                  >
                    <img src="statics/icons/app/iconlist2.png" />
                  </div>
                </div>
                <template #dropdown>
                  <MDropdownMenuItem
                    v-for="item in options"
                    :key="item.value"
                    class="g-one-line"
                    @click="handleChange(item, index)"
                  >
                    {{ locale.getTByContent(item, item.label, { en: "enLabel", zhCn: "label" }) }}
                  </MDropdownMenuItem>
                </template>
              </MDropdown>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="banner-btn">
      <img
        src="statics/icons/app/iconadd.png"
        class="g-pointer"
        :class="{ _disabled: row.values.length >= 100 }"
        @click="tagsPaneModel.bannerModel.addSlotValue(row)"
      />
      <img
        src="statics/icons/app/iconreduce.png"
        class="g-pointer"
        :class="{ _disabled: !tagsPaneModel.bannerModel.activeBannerId }"
        @click="tagsPaneModel.bannerModel.deleteSlotValue(row)"
      />
      <img
        src="statics/icons/app/icon-move-up.svg"
        class="g-pointer"
        :class="{ _disabled: !tagsPaneModel.bannerModel.activeBannerId || isFirstChild }"
        @click="tagsPaneModel.bannerModel.moveUpSlotValue()"
      />
      <img
        src="statics/icons/app/icon-move-down.svg"
        class="g-pointer"
        :class="{ _disabled: !tagsPaneModel.bannerModel.activeBannerId || isLastChild }"
        @click="tagsPaneModel.bannerModel.moveDownSlotValue()"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, inject, Ref, watch, ref } from "vue";
import { BannerItem, InstanceSlotData } from "./types";
import { propertyUtil } from "./PropertyUtil";
// import SelectNode from ' ../../../attribute/propertyEditors/common/Select.vue';
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { locale } from "@/util/locale";
import { BannerPosition } from "@/constants/Enums";
import { TagsPaneModel } from "./models/TagsPaneModel";
import { modelService } from "@/modules/model/service";

const props = defineProps<{
  row: InstanceSlotData;
  tagsPaneModel: TagsPaneModel;
}>();
interface BannerOption {
  label: string;
  enLabel: string;
  value: BannerPosition;
}
const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const bannerItems = ref<BannerItem[]>([]);
watch(
  () => props.row.values,
  async values => {
    bannerItems.value.length = 0;
    for (const slotValue of values) {
      if (slotValue.value) {
        const bannerItem = propertyUtil.stringToBannerInfo(slotValue.value as string);
        if (bannerItem) {
          bannerItem.id = slotValue.id;
          if (bannerItem.html) {
            const html = await modelService.transformHtmlText(props.tagsPaneModel.tabsModel.projectId, bannerItem?.html);
            bannerItem.html = html;
          }
          bannerItems.value.push(bannerItem);
        }
      }
    }
  },
  { immediate: true }
);
watch(
  () => props.row.values,
  (nextList, preList) => {
    const selectIndex = preList.findIndex(item => item.id == props.tagsPaneModel.bannerModel.activeBannerId);
    if (selectIndex > -1) {
      props.tagsPaneModel.bannerModel.activeBannerId = nextList[selectIndex]?.id;
    }
  }
);
const bannerSelected = computed(() => {
  return bannerItem => {
    return bannerItem.id === props.tagsPaneModel.bannerModel.activeBannerId;
  };
});

async function handleChange(item: BannerOption, index: number) {
  // console.log(item, index);
  const newValues = [...props.row.values];
  const oldValue: BannerItem = JSON.parse(newValues[index].value as string);
  oldValue.status = item.value;
  newValues[index].value = JSON.stringify(oldValue);
  await props.tagsPaneModel.updateSlotValue(props.row, newValues.map(it => it.value) as string[]);
  // ipcRenderer.send(IpcMsg.BannerChange);
}

const options: BannerOption[] = [
  { label: "头部", enLabel: "Header", value: BannerPosition.Header },
  { label: "底部", enLabel: "Footer", value: BannerPosition.Footer },
  { label: "都有", enLabel: "Both", value: BannerPosition.Both },
  { label: "无", enLabel: "None", value: BannerPosition.None }
];
/**
 * 是否是第一个
 */
const isFirstChild = computed(() => {
  if (!props.tagsPaneModel.bannerModel.activeBannerId) {
    return false;
  }
  for (let classifier of props.tagsPaneModel.tableData) {
    for (let slot of classifier.slots) {
      for (let i = 0; i < slot.values.length; i++) {
        if (slot.values[i].id === props.tagsPaneModel.bannerModel.activeBannerId) {
          return i === 0;
        }
      }
    }
  }
  return false;
});
/**
 * 是否是最后一个
 */
const isLastChild = computed(() => {
  if (!props.tagsPaneModel.bannerModel.activeBannerId) {
    return false;
  }
  for (let classifier of props.tagsPaneModel.tableData) {
    for (let slot of classifier.slots) {
      for (let i = 0; i < slot.values.length; i++) {
        if (slot.values[i].id === props.tagsPaneModel.bannerModel.activeBannerId) {
          return i === slot.values.length - 1;
        }
      }
    }
  }
  return false;
});
</script>
<style lang="scss" scoped>
.banner-main {
  display: flex;
  width: 100%;
  overflow: hidden;
  .banner-left {
    flex: 1 1 100px;
    overflow: auto;
  }
  .banner-header {
    display: flex;
    border-bottom: 1px solid #ddd;
    flex: 1;
  }
  .banner-display {
    border-left: 1px solid #ddd;
    width: 60px;
    display: flex;
    justify-content: left;
    padding-left: 4px;
    align-items: center;
    :deep(.c-dropdown) {
      display: flex;
      flex: 1;
      justify-content: left;
      align-items: center;
    }
    .display-content {
      display: flex;
      cursor: pointer;
    }
  }
  .banner-btn {
    flex: 0 0 30px;
    border-left: 1px solid #ddd;
    width: 30px;
    padding-left: 4px;
  }
  .banner-content {
    overflow: hidden;
    .banner-item {
      display: flex;
      min-height: 56px;
      overflow: hidden;
      &:not(:first-child) {
        border-top: 1px solid #ddd;
      }
    }
    .active-banner-item {
      background-color: var(--md-color-sub2);
    }
  }
}
</style>
